<template>
  <div class="box">

    <table style="text-align: left;">
      <thead>
        <tr>
          <td style="width: 50px;">序号</td>
          <td style="width: 150px;">学历</td>
          <td style="width: 150px;">工作经验</td>
          <td style="width: 100px;">招聘人数</td>
        </tr>
      </thead>

    </table>
    <table>
      <Vue3SeamlessScroll :list="demandList" :hover="true" :step="0.1" class="scroll-wrap">

        <div v-for="(item, index) in demandList" :key="index">
          <div>
            <tr>
              <td style="width: 50px;">{{ index + 1 }}</td>
              <td style="width: 150px;">{{ item.educateName }}</td>
              <td style="width: 150px;">{{ item.experience }}</td>

              <td v-if="item.count >= 1000" style="width: 100px;color: #73E68C;">{{ item.demandSize }}人</td>
              <td v-else-if="item.count <= 100" style="width: 100px;color: #DE3163;">{{ item.demandSize }}人</td>
              <td v-else style="width: 100px;">{{ item.demandSize }}人</td>

            </tr>
            <img src="../assets/imgs/zuo_xuxian.png" style="width: 100%;padding: 0px;margin: 0px;">

          </div>
        </div>

      </Vue3SeamlessScroll>
    </table>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { ListDemand } from "@/api/screen/demand.js";
import { ref } from 'vue';

const demandList = ref([])
async function getList() {
  const response = (await ListDemand()).data;
  // console.log(response);
  demandList.value = response;
}
getList()

</script>
<style>

.scroll-wrap {
  /* height: 210px; */
  /* height: 100%; */
  width: 100%;
  overflow: hidden;
}
</style>
